<template>
  <div class="home">
    <div class="home-box" ref="home-box">
      <div class="home-header">
        <navbar :onClickLeft="onClickRight" :leftArrow="leftArrow" :title="title">
          <template slot="right">
            <!-- <span>按钮</span> -->
          </template>
        </navbar>
      </div>
      <div class="home-content">
        <router-view :scroll="scroll"></router-view>
        <!-- <div class="footer-text"></div> -->
      </div>
      <div class="home-footer" v-show="tabbar_show">
        <tabbar :openRoute="true"></tabbar>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import tabbar from "@/components/tabbar/index.vue";
import navbar from "@/components/navbar/index.vue";
export default {
  name: "Home",
  components: {
    navbar,
    tabbar,
  },
  data() {
    return {
      active: "/index",
      title: "",
      tabbar_show: true,
      leftArrow: false
    };
  },
  watch: {
    $route: {
      handler: function (newValue, oldValue) {
        console.log(newValue, oldValue);
        if(newValue.path === '/shop') {
          this.leftArrow = true,
          this.tabbar_show = false
        } else {
          this.leftArrow = false,
          this.tabbar_show = true
        }
        if (newValue.meta?.title) {
          this.title = newValue.meta?.title;
        }
      },
      immediate: true,
    },
  },
  
  
  methods: {
    onClickRight() {
      this.$router.back();
    },
    scroll (judge = true) {
    if(judge) {
      this.$refs['home-box'].scrollTo({ top: 200, behavior: "smooth" });
    } else {
       this.$refs['home-box'].scrollTo({ top: 0, behavior: "smooth" });
    }

    }
  },
};
</script>
<style lang="scss">
.home {
  height: 100vh;
  display: flex;
  .home-box {
    flex: 1;
    overflow: auto;
    // background: red;
  }
  .home-header {
  }
  .home-content {
    // height: 900px;
    margin-bottom: 50px;
    position: relative;
    // .footer-text {
    //   position: absolute;
    //   bottom: 0px;
    // }
  }
  .home-footer {
  }
}
</style>
